<template>
  <div class="app-container home">
    <!-- <div>
      <Particles id="tsparticles" :particlesInit="particlesInit" :options="options" />
    </div> -->
    <header class="t_header">
      <div
        style="position: absolute; top: 10px; left: 110px; color: #fff; font-size: 20px; display: flex; align-items: center; cursor: pointer"
        @click="handleClickTitle(showTitleEdit)"
      >
        <div>
          <span v-if="showTitleEdit">
            <el-select v-model="id" filterable placeholder="Select" style="width: 200px">
              <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" link @click.stop="handleSubmitTitle({ id, deviceName })"> <span>提交</span> </el-button>
          </span>
          <span v-else>焊钳信息【{{ deviceName }}】</span>
        </div>
      </div>
    </header>

    <el-row class="row-card" :gutter="20" style="padding: 20px; display: flex; justify-content: space-between; position: relative; height: 100%">
      <img src="@/assets/images/left_line.png" style="position: absolute; left: 0; top: 0" />

      <el-col :xs="24" :sm="12" :md="12" :lg="4" style="margin-bottom: 10px">
        <div
          class="card-body"
          style="
            height: 100%;
            background: linear-gradient(-45deg, rgb(121.3, 187.1, 255), #409eff);
            color: #fff;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img :src="k_value" style="width: 40px" />
          <div style="color: #fff; font-size: 12px">
            <div>
              <span>K1 : {{ handleBaseData("K1") }}</span> &nbsp;&nbsp; <span>K2 : {{ handleBaseData("K2") }}</span>
            </div>
            <div>
              <span>K3 : {{ handleBaseData("K3") }}</span> &nbsp;&nbsp; <span>Ki : {{ handleBaseData("Ki") }}</span>
            </div>
            <div>Kp : {{ handleBaseData("Kp") }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="4" style="margin-bottom: 10px">
        <div
          class="card-body"
          style="
            height: 100%;
            background: linear-gradient(-45deg, rgb(148.6, 212.3, 117.1), #67c23a);
            color: #fff;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img :src="solderingPliers" style="width: 40px" />
          <div style="color: #fff">
            <div style="font-size: 12px">
              <span>焊钳型号</span>
            </div>
            <div style="font-size: 18px; margin-top: 5px">{{ handleBaseData("焊钳型号") }}</div>
            <div style="font-size: 12px">固件版本号: {{ handleBaseData("固件版本号") }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="4" style="margin-bottom: 10px">
        <div
          class="card-body"
          style="
            height: 100%;
            background: linear-gradient(-45deg, #2dcee3, #24a4b5);
            color: #fff;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img :src="airCylinder" style="width: 40px" />
          <div style="color: #fff">
            <div style="font-size: 12px">气缸型号</div>
            <div style="font-size: 20px; margin-top: 5px">{{ handleBaseData("气缸型号") }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="4" style="margin-bottom: 10px">
        <div
          class="card-body"
          style="
            height: 100%;
            background: linear-gradient(-45deg, rgb(237.5, 189.9, 118.5), #e6a23c);
            color: #fff;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img :src="person" style="width: 40px" />
          <div style="color: #fff">
            <div style="font-size: 12px">生产负责人 : {{ deviceBaseData.device?.productionManager }} - {{ deviceBaseData.device?.productionManagerId }}</div>
            <div style="font-size: 12px">维修负责人 : {{ deviceBaseData.device?.maintenanceManager }} - {{ deviceBaseData.device?.maintenanceManagerId }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="4" style="margin-bottom: 10px">
        <div
          class="card-body"
          style="
            height: 100%;
            background: linear-gradient(-45deg, rgb(248, 152.1, 152.1), #f56c6c);
            color: #fff;
            border-radius: 5px;
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img :src="location" style="width: 40px" />
          <div style="color: #fff; font-size: 12px">
            <div>区域 : {{ deviceBaseData.device?.belongArea }}</div>
            <div>工段 : {{ deviceBaseData.device?.belongSection }}</div>
            <div>工位 : {{ deviceBaseData.device?.belongStation }}</div>
          </div>
        </div>
      </el-col>

      <img src="@/assets/images/left_line.png" style="transform: rotate(180deg); position: absolute; bottom: 0; right: 0" />
    </el-row>

    <br />
    <!-- 经济性分析 -->
    <div style="height: 400px; position: relative">
      <div style="position: absolute; top: 15px; right: 0; z-index: 1">
        <el-input
          v-model="electrodeCapPrice_count"
          size="small"
          oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
          style="width: 120px; margin-right: 5px"
          placeholder="数据量"
        >
          <template #suffix>
            <el-button type="primary" link :disabled="!electrodeCapPrice_count" @click.stop="handleSubmitElectrodeCapPriceCount(electrodeCapPrice_count)">
              <span>提交</span>
            </el-button>
          </template>
        </el-input>
        <el-tag plain v-if="!editCapPrice">
          电极帽单价：{{ deviceBaseData.device?.capPrice }}
          <el-icon
            @click="
              () => {
                editCapPrice = true;
              }
            "
            ><Edit
          /></el-icon>
        </el-tag>
        <el-input v-else v-model="electrodeCapPrice" size="small" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 120px" placeholder="电极帽单价">
          <template #suffix>
            <el-button type="primary" link :disabled="!electrodeCapPrice" @click.stop="handleSubmitElectrodeCapPrice(electrodeCapPrice, id, deviceName)">
              <span>提交</span>
            </el-button>
          </template>
        </el-input>
      </div>

      <img src="@/assets/images/down.png" style="width: 100%; height: 100%" />
      <div style="color: #fff; position: absolute; left: 13%; top: 18px; transform: translate(-50%)">经 济 性 分 析</div>
      <el-row :gutter="20" style="width: 99%; height: 300px; position: absolute; top: 80px; left: 20px">
        <el-col :span="8">
          <baseChart :option="weldingSpotPrice22" />
          <!-- <baseChart :option="weldingSpotPrice11" /> -->
        </el-col>
        <el-col :span="8">
          <baseChart :option="weldingSpotPrice22" />
        </el-col>
        <el-col :span="8">
          <baseChart :option="weldingSpotPrice3" />
        </el-col>
      </el-row>
    </div>
    <br />
    <br />
    <!-- 焊接状态展示 -->
    <div style="height: 400px; position: relative">
      <img src="@/assets/images/down.png" style="width: 100%; height: 100%" />
      <div style="color: #fff; position: absolute; left: 13%; top: 18px; transform: translate(-50%)">焊 接 状 态 展 示</div>
      <el-row :gutter="24" style="width: 99%; height: 300px; position: absolute; top: 80px; left: 20px">
        <el-col :span="6">
          <baseChart :option="faultStatistics" />
        </el-col>
        <el-col :span="6" style="position: relative">
          <el-input v-model="frictionForceMax" size="small" style="width: 120px; position: absolute; top: 0; right: 0; z-index: 1" placeholder="最大值设置">
            <template #suffix>
              <el-button type="primary" link @click.stop="handleSubmitFrictionForceMax(frictionForceMax)"> <span>提交</span> </el-button>
            </template>
          </el-input>
          <baseChart :option="frictionForce" />
        </el-col>
        <el-col :span="6">
          <baseChart :option="errorCount" />
        </el-col>
        <el-col :span="6">
          <baseChart :option="clampingTime" />
        </el-col>
      </el-row>
    </div>
    <br />
    <br />
    <!-- 铣削状态展示 -->
    <div style="height: 400px; position: relative">
      <img src="@/assets/images/down.png" style="width: 100%; height: 100%" />
      <div style="color: #fff; position: absolute; left: 13%; top: 18px; transform: translate(-50%)">铣 削 状 态 展 示</div>
      <el-row :gutter="24" style="width: 99%; height: 300px; position: absolute; top: 80px; left: 20px">
        <el-col :span="24" style="position: relative">
          <div style="position: absolute; top: 0; right: 20px; z-index: 1">
            <span style="color: #fff; font-size: 12px">极限铣削功能</span>
            <span>
              <el-switch
                v-model="activeMillingAmount"
                size="small"
                inline-prompt
                active-text="开"
                inactive-text="关"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin: 0 10px"
                @change="handleActiveMillingAmount(activeMillingAmount)"
            /></span>
            <el-input
              v-if="activeMillingAmount"
              v-model="millingAmountMax"
              size="small"
              :disabled="!activeMillingAmount"
              style="width: 140px"
              placeholder="极限铣削量设置"
            >
              <template #suffix>
                <el-button type="primary" link :disabled="!activeMillingAmount" @click.stop="handleSubmitMillingAmountMax(millingAmountMax)">
                  <span>提交</span>
                </el-button>
              </template>
            </el-input>
          </div>

          <baseChart :option="millingAmount" />
        </el-col>
      </el-row>
    </div>

    <br />
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { loadSlim } from "tsparticles-slim";
import { options } from "@/utils/particlesConfig";
import baseChart from "@/components/charts";
// ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
import { getBaseInfo, getDeviceDetail, getCapEconomy, updateCapPrice } from "@/api/deviceDetails";
import k_value from "@/assets/images/k_value.png";
import solderingPliers from "@/assets/images/solderingPliers.png";
import airCylinder from "@/assets/images/airCylinder.png";
import person from "@/assets/images/person.png";
import location from "@/assets/images/location.png";
const { proxy } = getCurrentInstance();

const deviceName = ref("XXX");
const id = ref(null);
const showTitleEdit = ref(false);
const frictionForceMax = ref("");
const millingAmountMax = ref("");
const activeMillingAmount = ref(false);
const electrodeCapPrice = ref(null);
const electrodeCapPrice_count = ref(null);
const deviceList = ref([]);
const deviceBaseData = ref({});
const editCapPrice = ref(false);

import {
  weldingSpotPrice1,
  weldingSpotPrice2,
  weldingSpotPrice3,
  faultStatistics,
  frictionForce,
  errorCount,
  clampingTime,
  millingAmount,
} from "./chartOptions";
import { getCurrentInstance } from "vue";
const weldingSpotPrice22 = ref(weldingSpotPrice2()); // 使其响应式
const weldingSpotPrice11 = ref(weldingSpotPrice1()); // 使其响应式

// 加载粒子效果
const particlesInit = async (engine) => {
  await loadSlim(engine);
};

/**
 * 处理点击标题事件的函数
 *
 * @param {any} params - 触发事件时传递的参数 如果存在 params，则不执行任何操作
 */
function handleClickTitle(params) {
  // 检查 params 是否存在，如果存在则直接返回，不执行后续操作
  if (params) {
    return;
  }
  // 设置 showTitleEdit 的值为 true，以显示标题编辑界面
  showTitleEdit.value = true;
}

/**
 * 提交标题编辑功能的处理函数
 * 该函数在用户编辑设备标题后点击保存时触发，负责更新设备名称和ID，并获取相关数据
 * @param {Object} params - 包含设备ID的对象，用于识别和获取设备信息
 */
function handleSubmitTitle(params) {
  // 根据提供的设备ID过滤设备列表，以获取并更新设备名称
  deviceName.value = deviceList.value.filter((item) => item.value === params.id)[0].label;
  // 更新当前设备的ID
  id.value = params.id;
  // 调用函数获取设备数据【5张卡片的数据、电极帽单价的数据】
  getDeviceData(params);
  // 调用函数获取经济数据【电极帽经济性曲线的函数】
  getCapEconomyData({ deviceName: deviceName.value });
  // 隐藏标题编辑界面
  showTitleEdit.value = false;
}

/**
 * 提交电极帽价格处理函数
 * 该函数负责更新电极帽的价格信息，并在成功后显示消息提示
 * @param {number} electrodeCapPrice - 电极帽的新价格
 * @param {string} id - 设备的唯一标识符
 * @param {string} deviceName - 设备的名称
 */
function handleSubmitElectrodeCapPrice(electrodeCapPrice, id, deviceName) {
  // 更新电极帽的价格信息
  updateCapPrice({ id, capPrice: electrodeCapPrice }).then((res) => {
    // 获取响应消息
    const { msg } = res;
    // 显示成功消息提示
    proxy.$modal.msgSuccess(msg);
    // 提交标题信息
    handleSubmitTitle({ id, deviceName });

    // 关闭编辑价格的界面或状态
    editCapPrice.value = false;
  });
}

// 提交电极帽价格数据量
function handleSubmitElectrodeCapPriceCount(electrodeCapPrice_count) {
  getCapEconomyData({ deviceName: deviceName.value, pageSize: electrodeCapPrice_count });
}

/**
 * 获取设备列表信息
 * 该函数首先调用getBaseInfo函数获取基础信息，然后处理并更新设备列表及相关变量
 */
function listDevice(params) {
  // 调用getBaseInfo函数获取基础信息，该函数返回一个Promise对象
  getBaseInfo().then((res) => {
    // 从响应数据中解构出rows属性，包含设备列表信息
    const { rows } = res;

    // 更新deviceList.value，将每一行数据转换为包含value和label的对象
    deviceList.value = rows.map((row) => {
      // 解构出设备ID和名称
      const { id, deviceName } = row;
      // 返回新的对象，其中value为设备ID，label为设备名称
      return {
        value: id,
        label: deviceName,
      };
    });

    // 设置deviceName.value和id.value为设备列表中第一个设备的名称和ID
    deviceName.value = deviceList.value[0].label;
    id.value = deviceList.value[0].value;

    // 调用getDeviceData和getCapEconomyData函数，传入第一个设备的ID和名称
    getDeviceData({ id: id.value, deviceName: deviceName.value });
    getCapEconomyData({ deviceName: deviceName.value });
  });
}

/**
 *
 * 本函数用于请求设备详细信息，并将获取到的数据更新到组件的状态中
 * 主要用于更新界面上的5张卡片数据和电极帽单价数据
 *
 * @param {Object} params - 请求参数对象，包含所需的设备相关信息
 */
function getDeviceData(params) {
  getDeviceDetail(params).then((res) => {
    // 解构赋值从响应数据中提取pointValue和device属性
    const {
      data: { pointValue, device },
    } = res;
    // 更新组件状态，将获取到的点数价值和设备信息赋值给deviceBaseData
    deviceBaseData.value = { pointValue, device };
  });
}

function handleBaseData(pointName) {
  if (!Object.keys(deviceBaseData.value).length) return;
  const { pointValue } = deviceBaseData.value;

  return pointValue.filter((item) => item.pointName === pointName)[0]?.value;
}

/**
 * 根据给定的参数获取电极帽经济性曲线的函数
 * 此函数通过调用`getCapEconomy`接口获取电极帽经济性数据，并将其处理为图表数据的形式
 * @param {Object} params - 传递给`getCapEconomy`方法的参数对象
 */
function getCapEconomyData(params) {
  getCapEconomy(params).then((res) => {
    // weldingSpotPrice2

    // 解构获取返回结果中的rows数组，以及weldingSpotPrice22.value中的xAxis和series
    const { rows } = res;
    const { xAxis, series } = weldingSpotPrice22.value;
    // 将rows数组中的每个元素的索引作为x轴的数据
    xAxis[0].data = rows.map((item, index) => index);
    // 将rows数组中的每个元素的电极帽价格除以当前电极帽焊点数，作为图标Y轴数据
    series[0].data = rows.map((item, index) => item.capPrice / item.currentCapWeldingPoints);
  });
}

function handleSubmitFrictionForceMax(frictionForceMax) {
  console.log("🚀 ~ file: index.vue:338 ~ frictionForceMax:", frictionForceMax);
}
function handleSubmitMillingAmountMax(millingAmountMax) {
  console.log("🚀 ~ file: index.vue:341 ~ frictionForceMax:", millingAmountMax);
}
function handleActiveMillingAmount(activeMillingAmount) {
  console.log("🚀 ~ file: index.vue:344 ~ activeMillingAmount:", activeMillingAmount);
}

listDevice();
</script>

<style scoped lang="scss">
.home {
  background: url("@/assets/images/true.png");
  po #tsparticles {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .t_header {
    width: 100%;
    height: 50px;
    background: url("@/assets/images/linx.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 20px;
  }
  .row-card {
    .el-col {
      .card-body {
        padding: 20px;
      }
    }
  }
}
//背景色设置为透明
:deep(.el-input__wrapper) {
  background-color: rgba(0, 0, 0, 0);
}
//输入框颜色
:deep(.el-input__inner) {
  background-color: rgba(0, 0, 0, 0) !important;
  color: #fff;
}
</style>
